import React, { useEffect, useRef, useState } from 'react'
import './homePage.css'
import { Button, message, Modal } from 'antd'
import { useApi } from '../../api'
import { handlerDate } from '../../utils/index'
import qs from 'qs'
function HomePage() {
  const { getMyInfor, addOrder, submitOrder, paying } = useApi()

  //用户信息
  const [userInfo, setUserInfo] = useState({})

  //是否打开modal
  const [isModalOpen, setIsModalOpen] = useState(false)

  //判断modal是生成订单页面，还是支付页面
  const [isPaying, setIsPaying] = useState(false)

  //订单号
  const orderId = useRef('')

  //获取个人信息
  useEffect(() => {
    ;(async () => {
      try {
        let res = await getMyInfor()
        setUserInfo(res)
      } catch (error) {
        message.error('异常')
        console.log('err', error)
      }
    })()
  }, [])

  const showModal = () => {
    setIsModalOpen(true)
  }

  //确认购买，生成订单
  //测试账号：
  // oyiihv8912@sandbox.com
  // 111111
  const handleOk = async () => {
    try {
      if (!isPaying) {
        //生成订单号
        let res = await addOrder({
          num: 15
        })

        if (res.orderTd === '') {
          message.warning('你已经是会员了')
          return
        }

        //提交订单
        await submitOrder()

        orderId.current = res.orderId

        setIsPaying(true)
      } else {
        const id = orderId.current
        let { url } = await paying(
          qs.stringify({
            orderId: id,
            num: '15'
          })
        )

        setIsModalOpen(false)
        window.location.href = url
      }
    } catch (error) {
      message.error(error)
      console.log('err', error)
    }
  }
  const handleCancel = () => {
    setIsModalOpen(false)
  }

  return (
    <>
      <div className="w-[100%] h-[100%] ">
        <div className="items-baseline w-[100%] h-[3.75rem] bg-red-50 p-[.625rem]">
          <div className="flex">
            <img
              className="flex w-[1.5rem] h-[1.5rem] rounded-[50%] mr-[0.5rem]"
              src="http://localhost:89/uploads/50e7f48ec7974d5258bf0ee70948c162.jpg"
            ></img>
            <div className="mt-[.25rem] text-[.3rem] ">
              {userInfo?.username ? userInfo.username : '匿名用户'}
            </div>
          </div>
          <div className="mt-[.375rem] text-[.2rem] flex ">
            <div className="mt-[.25rem]">
              <span className=" text-red-500">当前状态：</span>
              {userInfo.vip == 0 ? '会员' : '普通用户'}
            </div>
            {/* 充值会员 */}
            {userInfo?.vip == 1 ? (
              <div>
                <Button
                  className="mt-[.15rem] ml-[.15rem]"
                  type="primary"
                  danger
                  onClick={showModal}
                >
                  充值会员
                </Button>
                <Modal
                  title={!isPaying ? '权限说明' : '你有待支付的订单'}
                  centered
                  style={{
                    fontSize: 20,
                    titleColor: '#c9763e'
                  }}
                  open={isModalOpen}
                  onOk={handleOk}
                  onCancel={handleCancel}
                  okText={!isPaying ? '确认购买' : '支付'}
                  cancelText="取消"
                >
                  {!isPaying ? (
                    <div>
                      <p className="text-[16px] text-[#999aaa] leading-[30px]">
                        1.会员
                        购买成功后，在会员有效期内，会员所发布的文章优先被查看，每日可选择一篇文章主动推送给100名用户。
                      </p>
                      <p className="text-[16px] text-[#999aaa] leading-[30px]">
                        2.普通用户每日只能发送一篇文章，会员每日可发布5篇文章数。
                      </p>
                      <p className="text-[16px] text-[#999aaa] leading-[30px]">
                        3.基于网络商品和虚拟商品的性质和特征，会员一经购买无正当理由不予退款，不支持升级，请您谅解！
                      </p>
                      <p className="text-[16px] text-[#999aaa] leading-[30px]">
                        4.关于会员权限有疑惑的可联系管理员解答
                      </p>
                      <p className="text-[16px] text-[#999aaa] leading-[30px]">
                        5.会员价格：每月十五元
                      </p>
                    </div>
                  ) : (
                    <div>
                      <p>会员月卡</p>
                      <p className="text-red-500">待支付：15元</p>
                    </div>
                  )}
                </Modal>
              </div>
            ) : (
              ''
            )}
          </div>
        </div>
        <div>
          <div className="flex ml-[12px] mt-[28px] font-bold text-[.25rem]"> 用户基本信息</div>
          <div className="flex flex-col items-start ml-[20px] mt-[.175rem] text-[.2rem]">
            <div className="mt-[.2rem]">性别：{userInfo?.sex == 0 ? '男' : '女'}</div>
            <div className="mt-[.2rem]">
              生日：{userInfo?.birth ? handlerDate(userInfo?.birth) : '暂无'}
            </div>
            <div className="mt-[.2rem]">地址：{userInfo?.address ? userInfo.address : '暂无'}</div>
            <div className="mt-[.2rem]">手机号：{userInfo?.phone ? userInfo.phone : '暂无'}</div>
          </div>
        </div>
        <div className="flex mt-[.375rem] ml-[.15rem]">
          <Button type="primary">编辑</Button>
        </div>
      </div>
    </>
  )
}

export default HomePage
